<template>
  <div class="ebook-reader">
    <div id="read" />
  </div>
</template>

<script>
import Epub from 'epubjs'
import { ebookMixin } from '../../mixin/mixin'
import { getFontFamily, getFontSize, saveFontFamily, saveFontSize, saveTheme, getTheme } from '../../utils/localStorage'
// global.ePub = Epub
export default {
  mixins: [ebookMixin],
  mounted() {
    this.$store.dispatch('book/setFileName', this.$route.params.filename.split('|').join('/'))
      .then(() => {
        this.initEpub()
      })
  },
  methods: {
    initTheme() {
      let theme = getTheme(this.fileName)
      if (!theme) {
        theme = this.themeList[0].name
        saveTheme(this.fileName, this.defaultTheme)
      }
      this.$store.dispatch('book/setDefaultTheme', theme)
      this.themeList.forEach(theme => {
        this.rendition.themes.register(theme.name, theme.style)
      })
      this.rendition.themes.select(this.defaultTheme)
    },
    initFontSize() {
      const fontSize = getFontSize(this.fileName)
      // console.log(fontSize)
      if (!fontSize) {
        saveFontSize(this.fileName, this.defaultFontSize)
      } else {
        this.rendition.themes.fontSize(fontSize)
        this.$store.dispatch('book/setDefaultFontSize', fontSize)
      }
    },
    initFontFamily() {
      const font = getFontFamily(this.fileName)
      if (!font) {
        saveFontFamily(this.fileName, this.defaultFontFamily)
      } else {
        this.rendition.themes.font(font)
        this.$store.dispatch('book/setDefaultFontFamily', font)
      }
    },
    initRedition() {
      // 渲染
      this.rendition = this.book.renderTo('read', {
        width: window.innerWidth,
        height: window.innerHeight,
        method: 'default' // 微信配置
      })

      this.rendition.display().then(() => {
        // 初始化fontfamily
        this.initFontSize()
        this.initFontFamily()
        this.initTheme()
        this.initGlobalStyle()
      })

      this.rendition.hooks.content.register(contents => {
        // 手动添加样式文件
        Promise.all([
          contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/daysOne.css`),
          contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/cabin.css`),
          contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/montserrat.css`),
          contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/tangerine.css`)
        ]).then(() => {
          console.log('字体全部加载完毕...')
        })
      })
    },

    initGesture() {
      this.rendition.on('touchstart', event => {
        this.touchStartX = event.changedTouches[0].clientX
        this.touchStartTime = event.timeStamp
      })
      this.rendition.on('touchend', (event) => {
        const offsetX = event.changedTouches[0].clientX - this.touchStartX
        const time = event.timeStamp - this.touchStartTime
        if (time < 500 && offsetX > 40) {
          this.prevPage()
        } else if (time < 500 && offsetX < -40) {
          this.nextPage()
        } else {
          this.toggleTitleAndMenu()
        }
        // 组件默认事件行为发送
        event.preventDefault()
        // 组件冒泡
        event.stopPropagation()
      })
    },
    initEpub() {
      // const url = 'http://localhost:8050/epub/' + this.fileName + '.epub'
      const url = 'http://localhost:8050/148451.epub'
      // 解析
      this.book = new Epub(url)
      this.$store.dispatch('book/setCurrentBook', this.book)

      this.initRedition()

      this.initGesture()

      // 在 book
      this.book.ready.then(async() => {
        // console.log(1)
        return this.book.locations.generate(750 * (window.innerWidth / 375) * (getFontSize(this.fileName) / 16))
      })
        .then(() => {
          console.log(1)
          this.$store.dispatch('book/setBookAvailable', true)
        })
    },
    prevPage() {
      if (this.rendition) {
        this.rendition.prev()
        this.hideTitleAndMenu()
      }
    },
    nextPage() {
      if (this.rendition) {
        this.rendition.next()
        this.hideTitleAndMenu()
      }
    },
    toggleTitleAndMenu() {
      if (this.menuVisible) {
        this.$store.dispatch('book/setSettingVisible', -1)
      }
      this.$store.dispatch('book/setMenuVisible', !this.menuVisible)
      this.$store.dispatch('book/setSettingFontPopup', false)
    },
    hideTitleAndMenu() {
      this.$store.dispatch('book/setMenuVisible', false)
      this.$store.dispatch('book/setSettingVisible', -1)
      this.$store.dispatch('book/setSettingFontPopup', false)
    }

  }
}
</script>

<style>

</style>
